<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
    <script>
<!--        文档加载完毕后触发-->
        window.onload=function () {
            divObj=document.getElementsByClassName("imgDiv");
            console.log(divObj)
            //得到制定元素中，所有标签名为img的子元素集合
            var imgArray=divObj.getElementsByTagName("img");
            for (var i=0;i<imgArray.length;i++){
                imgArray[i].onclick=function () {
                    selectImg(this);
                }
            }

        }
        function showDiv(divObj){
            divObj.style.display="block";
        }
        function selectImg(clickImg){
            var imgObj=document.getElementById("faceImg");
            imgObj.src=clickImg.src;
            divObj.style.display="none";
        }

    </script>
</head>
<body>
    <img src="../loginImg/sys.jpg" id="faceImg" alt=""><br>
    <input type="button" value="更换头像" onclick="showDiv('imgDiv')"><br>

    <div class="imgDiv" style="display: none">
        <img src="../loginImg/b2.jpg">
        <img src="../loginImg/b3.jpg">
        <img src="../loginImg/b4.jpg">
    </div>


</body>
</html>